<template>
  <NModal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 400px">
      <MacHeader
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <NScrollbar style="max-height: 80vh">
          <div style="padding-left: 5px">
            <NForm ref="ruleForm" :model="queryForm" :rules="rules">
              <NFormItem label="品牌名称" path="name">
                <NInput v-model:value="queryForm.name" placeholder="请输入" />
              </NFormItem>
              <NFormItem label="权重" path="sort">
                <NInputNumber
                  class="w-full"
                  v-model:value="queryForm.sort"
                  placeholder="请输入"
                />
              </NFormItem>
              <NFormItem>
                <div class="tools w-full">
                  <NButton
                    type="primary"
                    attr-type="button"
                    @click="handleValidateClick"
                  >
                    <span>提交</span>
                  </NButton>
                </div>
              </NFormItem>
            </NForm>
          </div>
        </NScrollbar>
      </div>
    </div>
  </NModal>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
import brandApi from '@/service/api/car/brand'
import type { FormInst, FormRules } from 'naive-ui'
import {
  NButton,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NScrollbar,
  NInputNumber
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { diaApi } from '@/hooks/addDialog'
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const emit = defineEmits(['success'])
const ruleForm = ref<FormInst | null>(null)
const state = {
  ruleForm,
  apis: {
    doAdd: {
      api: brandApi.add
    },
    doEdit: {
      api: brandApi.edit
    }
  },
  emit,
  queryForm: {
    name: '',
    sort: 1
  }
}
const {
  dialogFormVisible,
  title,
  queryForm,
  open,
  close,
  handleValidateClick
} = diaApi(state)

const rules: FormRules = {
  name: [
    {
      required: true,
      message: '请输入品牌名称',
      trigger: 'blur'
    }
  ],
  sort: [
    {
      type: 'number',
      required: true,
      message: '请输入权重',
      trigger: 'blur'
    }
  ]
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
